<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link type="favicon" rel="shortcut icon" href="/favicon.ico" />
    <link rel="stylesheet" href="./css/common.css">
	<link rel="stylesheet" href="./css/index.css">
	<link href="https://mapapi.qq.com/web/lbs/javascriptV2/demo/css/sample-default.css" rel="stylesheet">
    <script
      charset="utf-8"
      src="https://map.qq.com/api/gljs?v=1.exp&key=DCYBZ-ZRBRS-GWZOT-6D4RC-DYCUT-OSB3U&libraries=visualization"
    ></script>
    <title>易迅通达</title>
	<style>
		#top {
			z-index: 10000;
			/* color: rgba(255, 255, 255, 0.75); */
		}
		#bottom{
			/* background-color:rgba(5, 27, 74, 1); */
			background-color:rgb(70, 101, 168);
			height: 100%;
			max-width: 455px;
			top: 0;
			flex-direction: column;
			justify-content: space-around !important;
		}
		.bottom-1,.bottom-2,.bottom-3,.bottom-4 {
			min-width: 32%;
			/* height: 250px; */
		}

		.bottom-4{
			position: relative;
		}
		.bottom-4 .legend{
			position: absolute;
			bottom:20px;
			right: 20px;
			display: flex;
			width: 100%;
		}

		.bottom-4 .legend .item-box{
			display: flex;
			flex: 1;
			margin: 0 2px;
		}

		.bottom-4 .legend .item-box .icon{
			width: 10px;
			height: 10px;
			border-radius: 50%;
			/* margin-right: 2px; */
			margin-left: 20px;
		}

		.bottom-4 .legend .item-box .text{
			color: #fff;
			font-size: 12px;
		}

		/* shuiqiu */

		.bottom-num {
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 60px;

			display: flex;
			
		}
		
		.bottom-num .item{
			width: 50%;
			display: flex;
			flex-direction: column;
			color: #fff;
			justify-content: center;
			align-items: center;
		}
		
		.bottom-num .item div{
			font-weight: 500;
		}
		/* end */

		@media screen and (max-height:800px) {
			.bottom-1,.bottom-2,.bottom-3,.bottom-4 {
				height: 200px;
			}
		}
		.bottom-4 .num2{
			position: absolute;
			text-align: center;
			top: 30px;
			right: 0px;
		}
		.bottom-4 .num2 .item-box {
			display: block;
			color: #00A3A1;
			font-size: 14px;
		}
		.top {
			z-index: 99;
			width: 425px;
			height: 255px;
			background: url(./img/left-top.png) no-repeat center;
			display: flex;
			flex-wrap: wrap;
			position: relative;
		}

		.top .item {
			padding: 20px 10px;
			width: 50%;
			height: 120px;
			color: #fff;
		}

		.top .item:nth-child(2),
		.item:nth-child(4) {
			padding-left: 30px;
		}
		.top p{
			margin: 0;
		}
		.top .top-title {
			font-size: 18px;
			color: rgba(255, 255, 255, 0.6);
		}

		.top .number {
			font-size: 26px;
			margin: 10px 0;
			line-height: 1.3;
			word-wrap: break-word;
		}

		.top img {
			position: absolute;
		}

		.top .center-img {
			width: 52px;
			height: 49px;
			top: 40%;
			left: 44%;
		}

		@media screen and (max-height:900px) {
			/* .bottom-1,.bottom-2,.bottom-3,.bottom-4 {
				height: 280px;
			} */
			/* body,html{
				height: 1000px;
			}
			#bottom{
				height: 1000px;
			} */
		}
	</style>
  </head>



  <body onload="initMap()">
    <div id="container"></div>
    <div id="top" >易迅通达数据可视化大屏</div>
	<div class="btn-change" onclick="hClickBtn()">
		<img src="./img/diqiu.png" alt="切换地图">
	</div>

	<div id="bottom">
		<div class="top">
			<div class="item">
				<p class="top-title">今日充电量(kw.h)</p>
				<p class="number" v-if="chargingData">{{chargingData.todayTotalPower}}</p>
			</div>
			<div class="item">
				<p class="top-title">累计充电量(kw.h)</p>
				<p class="number" v-if="chargingData">{{chargingData.totalPower}}</p>
			</div>
			<div class="item">
				<p class="top-title">今日服务车次（辆）</p>
				<p class="number" v-if="chargingData">{{chargingData.todayTotalCarNum}}</p>
			</div>
			<div class="item">
				<p class="top-title">累计服务车次（辆）</p>
				<p class="number" v-if="chargingData">{{chargingData.totalCarNum}}</p>
			</div>

			<img class="center-img" src="./img/left-top-center.png" alt="">
			<img style="top:6px;left:6px;" src="./img/left-top1.png" alt="">
			<img style="top:6px;right:6px;" src="./img/left-top2.png" alt="">
			<img style="bottom:6px;left:6px;" src="./img/left-top3.png" alt="">
			<img style="bottom:6px;right:6px;" src="./img/left-top4.png" alt="">
		</div>

		<!-- <div class="bottom-1" style="min-height: 160px !important;">
			<div id="line"></div>

			<div class="angle-border left-top-border"></div>
			<div class="angle-border right-top-border"></div>
			<div class="angle-border left-bottom-border"></div>
			<div class="angle-border right-bottom-border"></div>
		</div> -->

		<div class="bottom-2">
			<div class="title">桩总数量</div>
			<div id="pie"></div>

			<div class="angle-border left-top-border"></div>
			<div class="angle-border right-top-border"></div>
			<div class="angle-border left-bottom-border"></div>
			<div class="angle-border right-bottom-border"></div>
		</div>

		<div class="bottom-4">
			<div id="bar"></div>
			<div class="bottom-num">
				<div class="item" v-for="(item,index) in list" :key="item.id">
					<!-- :style="{color:(index == 0 ? '#FBA349' : '#4792FF')}" -->
					<div class="num" :style="{color:(index == 0 ? '#FBA349' : '#4792FF'),numStyle}">{{ item.num }}</div>
					<div class="bottom-title" :style="titleStyle">{{ item.title }}</div>
				</div>
			</div>

			<div class="angle-border left-top-border"></div>
			<div class="angle-border right-top-border"></div>
			<div class="angle-border left-bottom-border"></div>
			<div class="angle-border right-bottom-border"></div>

		</div>

	</div>
    
	<script src="./js/jquery.min.js"></script>
	<script src="./js/echarts.js"></script>
	<script src="./js/echarts-liquidfill.js"></script>
	<script src="./js/config.js"></script>
	<script src="./js/http.js"></script>

	<!-- <script src="https://cdn.jsdelivr.net/npm/vue@2"></script> -->
	<script src="./js/vue.js"></script>
	<script>
		var app = new Vue({
			el: '#bottom',
			data: {
				chargingData: {},
				// option: {},

				list: [
					{
						id: 1,
						num: 0,
						title: '在线桩数量',
					}, {
						id: 2,
						num: 0,
						title: '在线桩使用数量',
					}
				],
				numStyle: {
					fontSize: '',
				},
				titleStyle:{
					fontSize: '',
				},
				option: {},

				onLineNum: 0,		// 在线数量
				useNum: 0,			// 使用数量
				total: 0,			// 总数
			},
			created() {
				this.getInfo()
				setInterval(() => {
					this.getInfo()
				}, 12*1000);
				this.getData()
			},
			methods: {
				getInfo () {
					ajaxFn('stat/index/stat').then(res => {
						if (res.code>0) {
							this.chargingData = res.data
						}
					})
				},


				multiply(a, b) {
					// 先将数字转换为字符串
					var str1 = a.toString();
					var str2 = b.toString();
					// 获取两个数的小数位数
					var lenA = (str1.indexOf('.')==-1)?0:(str1.length-str1.indexOf(".")-1);
					var lenB = (str2.indexOf('.')==-1)?0:(str2.length-str2.indexOf(".")-1);
					// 比较两数的精度/位数，精度大的作为结果数精度
					var len = Math.max(lenA,lenB);
					
					// 运算结果
					var result = parseFloat(a*b).toFixed(1);	// 保留以为小数
					return result
				},
				getData(){
					
					ajaxFn('stat/index/stat5').then(res => {
						if (res.code>0) {
							
							this.list[0].num = res.data.online
							this.list[1].num = res.data.onlineUse
							
							// eventVue.$emit("online",res.data.total)
							this.total = res.data.total

							this.onLineNum = (res.data.online/res.data.total).toFixed(3)
							this.useNum = (res.data.onlineUse/res.data.total).toFixed(3)

							// console.log('onLineNum',this.onLineNum);
							// this.onLineNum *= 100
							// this.useNum *= 100
							// 初始化表结构
							this.initCharts()

							// 2024-1-13 设为动态 桩总数量饼图中间总数 使用stat5接口的总数
							getPieData(res.data.total)
						}
					})
					
				
				},
				// 初始化图表结构
				initCharts() {
					var chartBar = document.getElementById('bar');
					var myChart4 = echarts.init(chartBar);
					this.initEcharts = myChart4
					
					let datas = [
						[{
							value: this.onLineNum,
							direction: 'right', //波浪方向
							darkColor: '#F26C00',
							lightColor: '#FFDB78',
							bgColor: '#FFE5CE',
							borderColor: 'rgba(245, 139, 48, 0.3)',
							borderShadow: 'rgba(245, 139, 48, .1)',
						}, {
							value: this.onLineNum,
							direction: 'right', //波浪方向
							darkColor: '#F26C00',
							lightColor: '#FFDB78',
							bgColor: '#FFE5CE',
							borderColor: 'rgba(245, 139, 48, 0.3)',
							borderShadow: 'rgba(245, 139, 48, .1)',
						}],
						[{
							value: this.useNum,
							direction: 'right', //波浪方向
							darkColor: '#1171FC',
							lightColor: '#6EF2FF',
							bgColor: '#D4E1FF',
							borderColor: 'rgba(43, 136, 252, 0.3)',
							borderShadow: 'rgba(43, 136, 252, .1)',
						}, {
							value: this.useNum,
							direction: 'right', //波浪方向
							darkColor: '#1171FC',
							lightColor: '#6EF2FF',
							bgColor: '#D4E1FF',
							borderColor: 'rgba(43, 136, 252, 0.3)',
							borderShadow: 'rgba(43, 136, 252, .1)',
						}]
					]
					// this.initEcharts = myChart
					this.option = {
						title: {
							text: '在线设备及在线使用设备',
							top: 20,
							left: 20,
							textStyle: {
								color: '#FFF',  // 改变标示文字的颜色
								fontSize: 18,
								fontWeight: 'none',
							},
						},
						series: datas.map((data, idx) => {
							return {

								type: 'liquidFill',
								center: [25 * (idx == 0 ? idx + 1 : idx + 2) + '%', '50%'],
								backgroundStyle: {
									color: data[idx].bgColor, // 球体背景色
									borderWidth: 5, //内边框宽度
									// borderColor: 'yellow', //背景内边框
									// shadowColor: 'red', //阴影
									// shadowBlur: 10, //阴影模糊
								},
								// color: [data[1].lightColor, data[1].darkColor], // 每个波浪不同颜色，颜色数组长度为对应的波浪个数
								color: [{
									type: 'linear',
									x: 0,
									y: 0,
									x2: 0,
									y2: 1,
									colorStops: [{
											offset: 1,
											color: data[1].lightColor,
										},
										{
											offset: 0,
											color: data[1].darkColor,
										},
									],
									globalCoord: false,
								}, ],
								label: {
									normal: {
										// formatter: data[idx].value * 100 + '{d|%}',
										formatter: (item) => {
											// return this.multiply(item.data.value,100) + '{d|%}'
											return Number(this.multiply(data[idx].value,100)) + '{d|%}'
										},
										rich: {
											d: {
												fontSize: 20,
											}
										},
										textStyle: {
											fontSize: 28,
											color: '#fff'
										}
									},
								},
								tooltip: {
									show: true
								},
								outline: {
									show: true,
									borderDistance: 10,
									itemStyle: {
										color: data[idx].borderShadow,
										borderWidth: 5, //内边框宽度
										borderColor: data[idx].borderColor, //背景内边框
										shadowColor: '#fff', //阴影
										shadowBlur: 10, //阴影模糊
									}
								},
								data: data

							};
						})

					}
					
					this.initEcharts.setOption(this.option)
				},
			}
		})

		

		
	</script>
	
	<!-- 折线图 - 基站实时数据 -->
	<!-- <script>
		
		var chartDom = document.getElementById('line');
		var myChart = echarts.init(chartDom);

		let option = {
			title: {
			text: '当日充电时间段波浪图', // 标题
			top: '10',
			left: '20', // 距离左侧想像素
			textStyle: {
				color: '#FFF',
				fontWeight: 'normal',
				fontSize: '16px',
			}
			},
			grid: {
				show: true,
				left: '50',
				top: '50',
				right: '20',
				bottom: '30',
			},
			tooltip: {    // 提示框
				show: true,
				trigger: 'axis',
				triggerOn: 'mousemove|click', // 触发条件
				confine: true,    // 是否将 tooltip 框限制在图表的区域内
			},
			legend: {
				selectedMode: false, //取消图例上的点击事件
				icon: 'roundRect',
				top: '10',
				right: '20', // 图例右侧距离
				textStyle: { //图例文字的样式
					color: '#FFF',
					fontSize: '12'
				}
			},
			xAxis: {
			type: 'category',
			data: ['平时', '谷时', '尖时', '峰时', '平时'],
			boundaryGap: false,
			axisTick: {   // 刻度相关
				show: false
			},
			splitLine: {
				show: true,
				lineStyle: {
				color: "#465674"
				}
			},
			axisLine: {
				show: true,
				lineStyle: {
				color: '#465674',
				}
			},
			axisLabel: {  // 轴文字样式
				formatter: '{value}',
				show: true,
				textStyle: {
				fontSize: '10',
				color: '#fff'
				}
			},
			textStyle: {
				fontSize: '10',
				color: '#fff'
			},
			
			},
			yAxis: {
				type: 'value',
				alignTicks: true,
				splitLine: {
					show: true,
					lineStyle: {
					color: "#465674"
					}
				},
				axisLine: {
					show: true,
					lineStyle: {
					color: '#465674',
					}
				},
				axisLabel: {  // 轴文字样式
					formatter: '{value}',
					// formatter: '{value}%',
					show: true,
					textStyle: {
					fontSize: '10',
					color: '#fff'
					}
				},
				textStyle: {
					fontSize: '10',
					color: '#fff'
				},
			},
			series: [
			{
				name: '充电量',
				data: [82, 93, 49, 33, 52],
				type: 'line',
				symbol: 'circle',
				smooth: true,
				color: '#05fdcb',
				axisLabel: {
					show: true
				},
				areaStyle: {  // 渐变
				color: {
					type: 'linear',
					x: 0,
					y: 0,
					x2: 0,
					y2: 1,
					colorStops: [{
						offset: 0, color: '#05fdcb' // 0% 处的颜色
					}, {
						offset: 1, color: 'transparent' // 100% 处的颜色
					}],
					global: false // 缺省为 false
				}
				}
			}
			]
		}
		// setInterval(function () {
			// getLineData()
		// }, 1000*40);

		ajaxFn('stat/index/stat3').then(res => {
			let sum = 0
			
			if (res.code>0) {
				//      平      谷     尖   峰
				const { flat, valley,tip, peak} = res.data
				option.series[0].data = [flat, valley,tip, peak, flat]

				myChart.setOption(option)
			}
		})
			


	</script> -->

	<!-- 饼图 - 桩总数量 -->
	<script>
			
		var chartPie = document.getElementById('pie');
		var myChart2 = echarts.init(chartPie);

		let option2 = {
			title: {
				text: '',
				x: '35%',
				y: '50%',
				textStyle: {
					// formatter: `{d}%\n`,
					color: '#FFF',  // 改变标示文字的颜色
					fontSize: 20,
				},
			},
			legend: {
				selectedMode: false, //取消图例上的点击事件
				orient: 'vertical',
				right: 0,
				bottom: 8,
				itemWidth:15,
				itemHeight:10,
				textStyle: {
					color: '#fff',
				},
			},
			tooltip: {
				show: false,
			},
			toolbox: {
				show: true,
			},
			series: [{
				name: '桩总数量',
				type: 'pie',
				radius: [30, 80],
				center: ['42%', '54%'],
				roseType: 'area',
				stillShowZeroSumL: false,
				label: {
					formatter: `{d}%\n`,
					color: '#FFF',  // 改变标示文字的颜色
					fontSize: 12,
				},
				labelLine: {
					show: true,
					showAbove: true,
					normal:{  
							length: 5
					}  
				},
				labelLayout: function(params) {
					// console.log(myChart);
					const isLeft = params.labelRect.x < myChart.getWidth() / 2;
					const points = params.labelLinePoints;
					// Update the end point.
					points[2][0] = isLeft ?
						params.labelRect.x :
						params.labelRect.x + params.labelRect.width;
					return {
						labelLinePoints: points
					};
				},
				data: []
			}]
		}

		function getPieData (total) {
			ajaxFn('stat/index/stat2').then(res => {
				// console.log(res);
				let sum = 0
				// if (res.code == 0) {
				// 	res.data.forEach(item => { sum += item.value })
				// 	option2.series[0].data = res.data
				// 	option2.title.text = sum
				// 	initPie()
				// }
				if (res.code>0) {
					let data = Object.values(res.data)
					let sum = 0
					// console.log(data);
					data.map((item) => {
						item.name = item.districtName
						item.value = item.number
						sum += item.number
					})
					// console.log(sum);

					option2.series[0].data = data
					// option2.title.text = sum
					// option2.title.text = 7320
					option2.title.text = total
					// initPie()
					myChart2.setOption(option2)
					// option.series[0].data = data
					// option.title.text = sum
					// setTimeout(()=>{
					// 	option.title.text = this.total // 2022-5-7 总数用水波图的数据
					// 	option && myChart.setOption(option)
					// },100)
					
				}
			})
			
		}

		function initPie() {
			myChart2.setOption(option2)
		}
		
		// setTimeout(() => {
		// 	getPieData()
			
		// }, 1000);

	</script>

	<!-- 腾讯地图 -- 相关 -->
    <script>
		let type = 'wx'
		var map
		
		function initMap() {
			//初始化地图
			map = new TMap.Map("container", {
				zoom: 12, //设置地图缩放级别
				center: new TMap.LatLng(39.070246, 117.373794), //设置地图中心点坐标
				mapStyleId: "style3", //个性化样式2
				// baseMap: {  // 设置卫星地图
				// 	type: 'satellite'
				// }
			});
			getStationData()
			$("#container canvas").siblings().css("display","none") 
		}

		function getStationData() {
			let stationData = []
			let radData = []
			ajaxFn('stat/index/stat7').then(res => {
				if (res.code > 0) {
					res.data.forEach(item => {
						stationData.push({
							lat: Number(item.latitude),
							lng: Number(item.longitude),		  // 交流  						     	   直流
							styleId: item.station_type_id == 1 ? 'style1' : item.station_type_id == 2 ? 'style2' : 'style3' 
						})
						radData.push({
							radius: 1000,
							center: new TMap.LatLng(item.latitude, item.longitude, 0),
							styleId: item.station_type_id == 1 ? 'style1' : item.station_type_id == 2 ? 'style2' : 'style3' 
						})
					})
					// initBar(res.data.type_list) 	// 基站运行情况
					randerMap(stationData,radData)
				}
			})
		}

		function randerMap(stationData,radData) {
			
			// 初始化辐射圈
			// var radiationCircle = new TMap.visualization.Radiation({
			// 	styles: {
			// 		style1: {
			// 			fillColor: "rgba(28, 163, 80,0.2)", //辐射圈填充颜色 黄
			// 		},
			// 		style2: {
			// 			fillColor: "rgba(28, 163, 80,0.2)", //辐射圈填充颜色  红
			// 		},
			// 		style3: {
			// 			fillColor: "rgba(254, 51, 254,0.9)", //辐射圈填充颜色 粉
			// 		},
			// 		style4: {
			// 			fillColor: "rgba(1, 236, 252,0.9)", //辐射圈填充颜色 蓝
			// 		},
			// 	},
			// 	processAnimation: {
			// 		duration: 2000, //辐射圈半径从0到最大半径的时长，单位为ms
			// 	},
			// })
			// .addTo(map)
			// radiationCircle.setData(radData);
			
			//初始化散点图并添加至map图层
			var dot = new TMap.visualization.Dot({
				styles: { 
					style1: {
						// radius: 10, //圆形半径
						type: "image", //设置图片
						src: './img/jiao.png',
						width: 32, //宽度
						height: 35, //高度
						// anchor: {x:5, y:44}
					},
					style2: {
						type: "image", //设置图片
						src: './img/zhi.png',
						width: 32, //宽度
						height: 35, //高度
						// anchor: {x:5, y:44}
					},
					style3: {
						type: "image", //设置图片
						src: './img/hun.png',
						width: 32, //宽度
						height: 35, //高度
						// anchor: {x:5, y:44}
					},
					style4: {
						// fillColor: "rgba(29,250,242,1)", //圆形填充颜色
						// radius: 10, //圆形半径
						type: "image", //设置图片
						src: './img/4.png',
						width: 14, //宽度
						height: 26, //高度
						anchor: {x:5, y:14}
					},
				},
				enableBloom: false, // 泛光
			})
			.addTo(map)
			dot.setData(stationData); //设置数据
			
		}

		function hClickBtn () {
			if (type == '2d') {
				changewx()
				type = 'wx'
			}
			else {
				change2D()
				type = '2d'
			}
			getStationData()
		}

		function change2D() {
			// map.setViewMode('2D');
			map.destroy(); // 销毁之前的地图
			// var center = new TMap.LatLng(39.984104, 116.307503);
			//初始化地图
			map = new TMap.Map("container", {
				zoom: 15, //设置地图缩放级别
				center: new TMap.LatLng(39.070246, 117.373794), //设置地图中心点坐标
				mapStyleId: "style2", //个性化样式2
			});
		}


		function changewx() {
			map.destroy(); // 销毁之前的地图
			// var center = new TMap.LatLng(39.984104, 116.307503);
			//初始化地图
			map = new TMap.Map("container", {
				zoom: 15, //设置地图缩放级别
				center: new TMap.LatLng(39.070246, 117.373794), //设置地图中心点坐标
				mapStyleId: "style2", //个性化样式2
				baseMap: {  // 设置卫星地图
					type: 'satellite'
				}
			});
		}
    </script>
  </body>
</html>
